<template>
    <div>

        <el-form ref="editForm" :model="formFileds">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="formFileds.text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add">增加
                        </el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe
            highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
            <el-table-column property="name" label="角色名称">
            </el-table-column>
            <el-table-column property="index" label="角色顺序">
            </el-table-column>
            <el-table-column property="type" label="角色类型">
            </el-table-column>
            <el-table-column property="state" label="状态">
            </el-table-column>
            <el-table-column property="remarks" label="备注">
            </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                        @click="rowEdit(scope.$index, scope.row)"></el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.$index, scope.row, $event);"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 增加-弹出层 -->
        <RoleAdd ref="roleAddRef" v-if="roleAddShow" :roleAddShow="roleAddShow" @dialogClose="dialogClose"></RoleAdd>
        <RoleEdit ref="roleEditRef" v-if="roleEditShow" :roleEditShow="roleEditShow" :record="formFileds"
            @dialogClose="dialogClose"></RoleEdit>
    </div>
</template>
      
<script>
import RoleAdd from './roleAdd.vue';
import RoleEdit from './roleEdit.vue';
export default {
    name: "roleManage",
    components: {
        RoleAdd,
        RoleEdit
    },
    data () {
        return {
            formFileds: {
            },
            tableData: [{
                id: 0,
                name: '拍卖师',
                index: '1',
                type: '管理员',
                state: '正常',
                remark: '',
            },
            {
                id: 1,
                name: '拍卖师',
                index: '1',
                type: '管理员',
                state: '正常',
                remark: '',
            },
            {
                id: 2,
                name: '拍卖师',
                index: '1',
                type: '管理员',
                state: '正常',
                remark: '',
            },],
            roleAddShow: false,
            roleEditShow: false
        }
    },
    methods: {

        handleRowClick (row, event, column) {

            // 仅选中当前行
            this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },
        dialogClose () {

            this.roleAddShow = false;
            this.roleEditShow = false
        },
        rowEdit (index, row) {
            //  console.log(1111)
            // this.$refs.detailRef.handleEdit('qqqq')

            // //当前选中行
            this.formFileds = row;
            console.log(1)
            this.roleEditShow = true;
        },
        handleEdit (id) {
            this.$refs.editForm.validate(isValid => {

                if (!isValid) return;

                // 保存编辑后的数据
                Object.assign(this.tableData[id], this.formFileds);
                this.roleEditShow = false;

                // 考虑到可能编辑了日期-需要重新排序
                // ***注意：手动排序传参和表格的default-sort属性格式不太一样
                this.$refs.list.sort('date', 'descending');

                this.$message.success('编辑成功');
            });
        },
        rowDel (index, row, event) {

            // 让当前删除按钮失焦
            event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {

                this.tableData.splice(row.id, 1);
                this.$message.success('删除成功');
                return false;
            });
        },
        add () {

            this.roleAddShow = true;
            // console.log(this.roleAddShow)
        }
    }
}
</script>
      
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
      